<template>
	<div>
		<el-form :inline="true" :model="payRPTForm" size="mini">
			<el-form-item>
				<el-col :span="10">
				  <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期" v-model="payRPTForm.startDate" style="width: 150px;"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2">-</el-col>
				<el-col :span="10">
				  <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="结束日期" v-model="payRPTForm.endDate" style="width: 150px;"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item>
				<el-input v-model="payRPTForm.customerName" placeholder="客户"></el-input>
			</el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="query">查询</el-button>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="exportExcel">导出</el-button>
		  </el-form-item>
		  
		</el-form>
		
		
		
		<el-table
			v-loading="loading"
			:header-cell-style="{background:'#F5F5F5',color:'#606266'}"
			size='mini' 
		   :data="tableData"
		   :max-height="tableHeight"
		   border
		   style="width: 100%">
		   <el-table-column type="expand">
			 <template slot-scope="props">
				 <el-form label-position="left" inline class="demo-table-expand">
				   <el-form-item label="期初金额">
				   		<span>{{ props.row.initAmount }}</span>
				   </el-form-item>
				   <el-form-item label="油费">
				   		<span>{{ props.row.oilAmount }}</span>
				   </el-form-item>
				   <el-form-item label="手动补充输入">
				   					 <span>{{ props.row.supplyFee }}</span>
				   </el-form-item>
				   <el-form-item label="客户对应运输费">
					 <span>{{ props.row.customerTransportFee }}</span>
				   </el-form-item>
				   <el-form-item label="客户对应修理费">
					 <span>{{ props.row.customerRepairFee }}</span>
				   </el-form-item>
				   <el-form-item label="客户对应轮胎费">
					 <span>{{ props.row.customerTiresFee }}</span>
				   </el-form-item>
				   <el-form-item label="车主对应运输费">
					 <span>{{ props.row.carOwnerTransportFee }}</span>
				   </el-form-item>
				   <el-form-item label="车主对应修理费">
				   	 <span>{{ props.row.carOwnerRepairFee }}</span>
				   </el-form-item>
				   <el-form-item label="车主对应修理费">
					 <span>{{ props.row.carOwnerTiresFee }}</span>
				   </el-form-item>
				   
				   
				 </el-form>
			   </template>
			 
		   </el-table-column>
		   <el-table-column
		     prop="customerName"
		     label="客户名">
		   </el-table-column>
		   <el-table-column
		     prop="initAmount"
		     label="期初金额">
		   </el-table-column>
		   <el-table-column
		     prop="jfAmount"
		     label="借方">
		   </el-table-column>
		   <el-table-column
		     prop="dfAmount"
		     label="贷方">
		   </el-table-column>
		   <el-table-column
		     prop="balance"
		     label="余额">
		   </el-table-column>
		 </el-table>
		
	</div>
</template>

<script>
	import request from '../../../api/request.js'
	import { ObjToFormData } from '../../../util/commonUtil.js';
	import {PRE_URL}from '../../../util/constants.js'
	import RoutePaths from '../../../util/constants.js'  //引用模块进来
	
	export default{
		name:RoutePaths.ROUTE_RPT_PAY_NAME,
		data() {
		  return {
			//查询时loading
			loading:false,
			payRPTForm: {
				startDate: '',
				endDate:'',
				customerName:''
			},
			
			dialogVisible:false,
			tableHeight: window.innerHeight - 250,
			tableData: []
		  }
		},
		mounted () {

		},
		methods:{
			exportExcelForTravel(){
				
			},
			//查询
			query(){
				var form  = ObjToFormData(this.payRPTForm);
				var me = this;
				this.loading = true;
				request.post('/api/rpt/listPayRPT',
					form).then(
					response => {
						const result = response.data;
						const resultCount = response.count;
				
						me.commonUtil.showMessage(response.code,response.message);
						
						//给 数据显示赋值
						this.tableData = result;
						this.loading = false;
					}).catch(err=>{
						this.loading = false
					})
				
			}
		}
	}
</script>

<style>
	.demo-table-expand {
	  font-size: 0;
	}
	.demo-table-expand label {
	  width: 140px;
	  color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
	  margin-right: 0;
	  margin-bottom: 0;
	  width: 30%;
	}
</style>
